<template>
       <div class="mine-num-box">
            <div class="mine-num" @click="goMineList">
              煤矿数量
              <div>
                <span class="mine-num-val">
                  {{ customerList.length }}
                </span>
                <u-icon name="arrow-right"></u-icon>
              </div>
            </div>
             <div class="grid">
               <div
                 v-for="(item, index) in list"
                 :key="index"
                 class="box"
                 @click="toMineList(item)"
               >
                 <div style="font-weight: 900">{{ item.value }}</div>
                 <div style="font-size: 20rpx" class="m-t-10">
                   {{ item.name }}
                   <u-icon name="arrow-right" color="gray" size="20"></u-icon>
                 </div>
               </div>
             </div>
        </div>

</template>

<script>
export default {
  props: {
    countyNo: {
      type: String,
      default: "",
    },
    customerList: {
          type: Array,
          default: [],
        },
  },
  data() {
    return {
      list: [],
    };
  },
  watch: {
    countyNo(val) {
      this.getData();
    },
  },
  mounted() {
    this.getData();
  },
  methods: {
       goMineList() {
         uni.navigateTo({
           url: `/pages/cjt/basicInformation/mineList/index?countyNo=${this.countyNo}`,
         });
       },
    getData() {
      this.$get(
        // "/cjt/common/statisticCustomerCount?countyNo=" + this.countyNo
        "/cjt/common/statisticCustomerCount"
      ).then((res) => {
        this.list = [
          { name: "正常建设", value: res.body.zcjsCount, produceState: "003" },
          { name: "正常生产", value: res.body.zcscCount, produceState: "001" },
          { name: "试运转", value: res.body.syzCount, produceState: "005" },
          { name: "停产", value: res.body.tcCount, produceState: "002" },
          { name: "停建", value: res.body.tjCount, produceState: "004" },
        ];
      });
    },
    toMineList(item) {
      console.log(2);
      
      uni.navigateTo({
        // url: `/pages/cjt/basicInformation/mineList/index?countyNo=&produceState=${item.produceState}`,
        url: `/pages/cjt/basicInformation/mineList/index?produceState=${item.produceState}`,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.grid {
  display: flex;
  border-radius: 0 0 19rpx 19rpx;
  overflow: hidden;
  background: #fff;
  padding: 15rpx 0;
  .box {
    background-color: #fff;
    padding: 7px 0px;
    // width: 26%;
    width: 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-right: 1rpx solid rgba(0, 0, 0, 0.1);
    // border-radius: 7px;
  }
}
.mineBox {
  background: #fff;
  padding: 10px;
  border-radius: 4px;
  text-align: center;

  .mine-num-val {
    color: rgb(61, 95, 255);
    font-size: 16px;
    // margin-left: 10px;
    // margin-right: 20rpx;
  }
}
.mineBox {
  background: #fff;
  padding: 10px;
  border-radius: 4px;
  text-align: center;

  .mine-num-val {
    color: rgb(61, 95, 255);
    font-size: 16px;
    // margin-left: 10px;
    // margin-right: 20rpx;
  }
}
  .mine-num-box {
    background-image: url("/static/image/cjt/cjnxzc.png");
    background-size: 100% 100%;
    padding: 10rpx;
    border-radius: 20rpx;
  }
  .mine-num {
    // text-align: center;
    display: flex;
    justify-content: space-between;
    // align-items: center;
    width: 100%;
    padding: 0 20rpx;
    // height: 45px;
    box-sizing: border-box;
    background: #fff;
    line-height: 45px;
    background-color: rgba(0, 0, 0, 0);
    // background-image: url("/static/image/cjt/cjnxzc.png");
    // background-size: 100% 100%;
  }
</style>
